<template>
  <h1>文本指令</h1>
  <!--shift+Alt+方向-->
  <!-- 插值指令:将页面显示的文本内容与响应式变量的值进行绑定
 如果修改响应式变量的值,页面显示文本也会随之改变 -->
  <h1>我是第一个页面{{info}}</h1>
  <span>{{info}}</span>
  {{info+'下午好!'}}
  <hr>
  <button @click="f">点我</button>
  <hr>
  <!-- {{}}是v-text指令的简写形式,将响应式变量的值以文本形式直接数据绑定显示在页面上 -->
  <p v-text="aaa"></p>
  <p>{{aaa}}</p>
  <!-- v-html指令也是数据绑定,但若值中有html标签,会渲染出html标签的效果 -->
  <p v-html="aaa"></p>
<!-- {{}}是v-text指令的简写模式，将响应式变量的值以文本形式直接数据绑定显示在页面上 -->
</template>

<script setup>
import {ref} from "vue";

//1.定义响应式变量
const info = ref('我是info达内');
//2.定义箭头函数
const f = () => {
  console.log('点击了按钮');
  //3.使用响应式变量的值 注意：在JS中使用响应式变量的值，必须.value
  console.log(info.value);
  info.value = '我是新值！';
}

const aaa = ref('我是aaa,展示<mark>高亮</mark>效果');
</script>

<style scoped>

</style>